Published

⚛️ Memoization in React

Authors
  • avatar
    Name
    Elif Nur Karakoç
    Twitter

When you use React, you might see your page becoming slow or some components rendering again and again. This is more common in e-commerce apps — like when filtering products, adding to cart, or showing product lists.

Here, memoization (keeping values in memory) helps improve performance.

But if you use it in the wrong place, it can make your code more complex. In this post, I will explain useMemo, useCallback, and React.memo, when they are useful, and how to use them correctly.

What Is Memoization?

Memoization means saving a result in memory. If you use the same input again, React gives you the saved result. It doesn’t calculate it again.

In React, we use memoization to make rendering faster.

Short Definitions

React.memo

Wraps a functional component. If the props don’t change, it doesn’t re-render.

📌 Why use it?

To stop unnecessary re-renders. It compares props with shallow check.

useMemo

Saves a calculated value in memory.

📌 Why use it?

To avoid doing the same calculation again on every render.

useCallback

Saves a function in memory, so it has the same reference if nothing changes.

📌 Why use it?

To stop re-renders when sending functions as props to other components.

🔔 Note: These are useful only during re-renders. Using them too much can slow down the first render.

📌 Only use useMemo and useCallback for reference types like objects, arrays, or functions — not numbers or strings.

Examples of Memoization

1. React.memo – Example: Product Card in Order History

import { memo } from "react";

type Product = {
  id: number;
  name: string;
  price: number;
  image: string;
};

type Props = {
  product: Product;
};

const OrderProductCard = ({ product }: Props) => {
  return (
    <div className="order-product-card">
      <img src={product.image} alt={product.name} loading="lazy" />
      <h3>{product.name}</h3>
      <p>{product.price} ₺</p>
    </div>
  );
};

export default memo(OrderProductCard);

✅ When to use?

  • When you show a list of past orders and product data does not change.
  • If the product object is the same, the component does not re-render.
  • Good for long product lists.

⚠️ React.memo does a shallow check.

If you send a new object every time (like { id: 1, name: 'Test' }), it will re-render anyway. In that case, use useMemo outside the component to fix it.

2. useMemo – Example: Filter Products

const ProductList = ({ products, selectedCategories }: Props) => {
  const filteredProducts = useMemo(() => {
    return products.filter((product) =>
      selectedCategories.includes(product.category)
    );
  }, [products, selectedCategories]);

  return (
    <div className="grid">
      {filteredProducts.map((product) => (
        <OrderProductCard key={product.id} product={product} />
      ))}
    </div>
  );
};

✅ When to use?

  • When the product list is large,
  • When filtering is slow or complex,
  • To stop repeating the same calculation every render.

❗ When not to use?

  • When the product list is small,
  • When the filter is simple,
  • When you use it just because you’re used to it.

3. useCallback – Example: Add to Cart Function

const onAddToCart = useCallback((productId) => {
  dispatch(addToCart(productId));
}, [dispatch]);

✅ When to use?

  • If this function goes to a memoized child component (like React.memo),
  • If you don’t want the function to change every render.

❗ When not to use?

  • If you use the function in a simple button,
  • If the function is not sent as a prop,
  • If the other component is not memoized.

Should We Use It Everywhere?

No. If you use memoization in the wrong place, it can:

  • Make your code harder to read,
  • Use more memory,
  • Slow down the first render,
  • Make your app harder to maintain.

🔻Wrong Example 1:

const Summary = () => {
  const total = useMemo(() => 100 + 200, []);
  return <p>Total: {total} ₺</p>;
};

This is a simple calculation. Using useMemo here is not helpful.

🔻Wrong Example 2:

const Button = () => {
  const handleClick = useCallback(() => {
    console.log("Clicked");
  }, []);

  return <button onClick={handleClick}>Click</button>;
};

If you are not sending this function to another component, useCallback is not needed.

Don’t Optimize Without Measuring

Before you use memoization, make sure you really have a performance issue.

What Can Help You?

  • React Developer Tools – to see re-renders,
  • React Profiler + console.log – to track what renders and when,
  • Chrome DevTools Performance Tab – to check performance time.

If there is no unnecessary re-render, optimization won’t help.

First measure, then improve.

Conclusion

Memoization in React can help performance when you use it correctly.

It is very useful for product lists, order history, filters, and cart actions — especially in e-commerce apps.

But don’t use it everywhere. Always decide based on measurement and your app’s needs.

In this post, I shared how to use React.memo, useMemo, and useCallback — when to use them and when not to — with examples and simple explanations.

A small optimization can make a big difference for users.

Thanks for reading 💐

Elif

share